<template>
<!--使用场景的介绍-->
  <div style="margin-top: 100px">
          <el-row >
            <el-col :span="24">
              <div class="CoreContent">
                <div class="CoreTitle">
                  赋能场景
                </div>
                <div class="CoreDesc">
                  场景赋能，引领变革
                </div >
                <div style="width: 300px; margin: 0px auto;">
                  <div class="el-divider--horizontal"></div>
                </div>
              </div>
            </el-col>
          </el-row>
<!--    功能一-->
    <el-row :gutter="20" style="margin-top:50px">
      <el-col :span="12" class="row">

<!--        图片放置-->
        <div class="image">
            <el-image
                style="    width: 450px;height: 305px;"
                :src="MainImgOne"
                ></el-image>
          </div>
      </el-col>
      <el-col :span="11" class="row" style="margin-left: 40px;margin-top:50px">
       <div class="textcontent">
         <el-image style="width: 130px;height: 115px " :src="Img1"></el-image>
         <div class="firstdesc">
           服务对象：医疗研究人员，医生，科研人员....
         </div>
         <div class="seconddesc">
           应用价值：促进中医药领域价值最大化，帮助科研人员分析药物的关系。
         </div>
       </div>

      </el-col>


    </el-row>
<!--    功能二-->
    <el-row :gutter="20" style="margin-top:50px">
      <el-col :span="11" class="row" style="margin-left: 40px;margin-top:50px">
        <div class="textcontent">
          <el-image style="width: 130px;height: 115px " :src="Img1"></el-image>
          <div class="firstdesc">
            服务对象：医疗研究人员，医生，科研人员....
          </div>
          <div class="seconddesc">
            应用价值：促进中医药领域价值最大化，帮助科研人员分析药物的关系。
          </div>
        </div>

      </el-col>
      <el-col :span="12" class="row">

        <!--        图片放置-->
        <div class="image">
          <el-image
              style="    width: 450px;height: 305px;"
              :src="MainImgTwo"
          ></el-image>
        </div>
      </el-col>



    </el-row>
  </div>
</template>

<script>
export default {
  name: "ApplicationScenario",
  data(){
    return{
      MainImgOne:require("../assets/MainImgOne.png"),
      MainImgTwo:require("../assets/MainImgTow.png"),
      Img1:require("../assets/Img1.png"),
      testsrc: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
    }
  }
}
</script>

<style scoped>
.grid-content bg-purple{
  background: blue;
  height: 500px;
}
.CoreContent{

  display: flex;
  flex-direction: column;
  text-align: center;
}
.CoreTitle{
  font-size: 38px;
  font-weight: 700;
}
.CoreContent{
  font-size: 20px;
  margin-top: 20px;
  color: #333;
}
.el-divider--horizontal{
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  background-color: #e0dbdb;
  padding: 0 20px;
  color: #303133;
}
.image{
  /*margin-top: 70px;*/
    margin: 50px;
  display: flex;
  flex-direction: column;
}
.textcontent{
  width: 450px;height: 305px;

  margin-top: 150px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}
.firstdesc{

  color: #585859;
  text-align: left; font-size: 24px; margin-top: 40px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.seconddesc{
  color: #585859;
  text-align: left; font-size: 24px; margin-top: 10px;
}
</style>
